<template>
    <div class="header" :style="{'backgroundColor':tabIndex !=1?'#fff':''}" ref="headBar">
        <div class="menu-icon pub-icon">
          <i :class="`iconfont ${tabIndex ==1?'activeClass':''}`">&#xe619;</i>
        </div>
        <ul class="tab-list">
          <li v-for="item in navList" 
            :key="item.id" 
            :class="navClass(item)"
            @click="handleNavClick(item)"
          >
            <span>{{item.name}}</span>
          </li>
        </ul>
        <div class="search-icon pub-icon">
          <i :class="`iconfont ${tabIndex ==1?'activeClass':''}`">&#xe61f;</i>
        </div>
      </div>
</template>
<script>
export default {
    name:'tabBar',
    props:{
      tabIndex:{
        type:Number,
        defult:2
      }
    },
    data() {
        return {
            navList:[
              {
                id:1,
                name:'我的'
              },
              {
                  id:2,
                name:'发现'
              },
              {
                  id:3,
                name:'云村'
              },
              {
                  id:4,
                name:'视频'
              }
            ],
            active:2
        }
    },
    methods:{
        handleNavClick(t) {
            this.active = t.id
            this.$emit('change',this.active)
        },
        navClass(t) {
          if(this.tabIndex != 1) {
             return {'nav-active':this.active === t.id}
          }else{
            return {'activeClass':this.active === t.id}
          }
        },
        //我的头部动态变化背景
        scrollToTop(v) {
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if(this.tabIndex == 1){
              this.$refs.headBar.style.backgroundColor = `rgba(14,13,14,${Math.round(scrollTop*3)/100})`
            }
        }
    },
    mounted () {
        window.addEventListener('scroll', this.scrollToTop)
    },
}
</script>
<style lang="less" scoped>
    .header{
      position: fixed;
      top:0px;
      left: 0px;
      right: 0px;
      width: 100%;
      padding-top:20px;
      height: 70px;
      z-index: 22;
      .menu-icon{
        top: 20px;
        left: 20px;
       
      }
      .tab-list{
        width: 70%;
        margin: 0 auto;
        height: 70px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        li{
          color:@color3;
          span{
            display: inline-block;
            font-size: 28px;
          }
        }
        .nav-active{
            span{
              color: #000;
              font-size: 32px!important;
              font-weight: 600;
            }
          }
          
      }
      .activeClass{
        color: #fff!important;
        span{
           
            font-size: 32px!important;
            font-weight: 600;
        }  
      }
      .search-icon{
        top:20px;
        right: 20px;
      }
      .iconfont{
          font-size: 45px;
          font-weight: 300;
      }
    }
</style>